<template>
  <div class="image">
    <el-card>
      <div slot="header">
        <div>素材管理</div>
      </div>
      <!-- Tab菜单 -->
      <div class="btns-wrapper">
        <el-radio-group size="small" v-model="filterParams.collect" @change="handleChange">
          <el-radio-button :label="false">全部</el-radio-button>
          <el-radio-button :label="true">收藏</el-radio-button>
        </el-radio-group>
        <el-button @click="dialogVisible=true" style="float:right" type="primary" size="small">添加素材</el-button>
      </div>
      <!-- 列表 -->
      <div class="img-list">
        <div :key='item.id' v-for='item in list' class="img-item">
          <el-image :src="item.url">
            <div slot="error">
              <img src="../../assets/imgs/error.gif" />
            </div>
          </el-image>
          <!-- v-show="!filterParams.collect" 是用来控制收藏中的删除和收藏栏的 -->
          <div class="option" v-show="!filterParams.collect">
            <span @click="toggleStatus(item)" class="el-icon-star-off" :class="{red:item.is_collected}"></span>
            <span @click="deleteImage(item)" class="el-icon-delete"></span>
          </div>
        </div>
      </div>
      <!-- 分页区域 -->
      <el-pagination background layout="prev, pager, next" :total="total" :current-page="filterParams.page" :page-size="filterParams.per_page" @current-change="changePager" :hide-on-single-page="false"></el-pagination>
    </el-card>
    <!--  弹框 -->

    <el-dialog title="上传图片" :visible.sync="dialogVisible" width="400px">
      <!-- action表示上传图片的地址 -->
      <!-- headers表示接口调用的请求头 -->
      <!-- name 上传文件的参数名称 -->
      <!-- on-success表示上传成功的回调函数 -->
      <!-- show-file-list 表示是否显示文件列表 -->
      <el-upload class="upload-demo" :on-success='updateSuccess' :headers='headers' :show-file-list='false' name='image' multiple :action='updateURL'>
        <i v-if="!previewImg" class="el-icon-upload"></i>
        <img v-else :src="previewImg" alt="">
      </el-upload>
    </el-dialog>
    <!-- 图片列表
    <div class="img-list"></div> -->
  </div>
</template>
<script>
import { loadImageInfo, toggleCollect, deleteImage } from '@/api/image.js'
// 导入基准路径
import { baseURL } from '@/utils/request.js'
export default {
  name: 'ImageInfo',
  data () {
    return {
      // 预览图片地址
      previewImg: '',
      updateURL: baseURL + 'user/images',
      // 请求头
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('mytoken')
      },
      dialogVisible: false,
      filterParams: {
        page: 1,
        per_page: 16,
        collect: false
      },
      total: null,
      list: []

    }
  },
  methods: {
    // 上传图片成功 的回调函数
    updateSuccess (ret) {
      // 预览图片  1s后自动上传   刷新页面
      console.log(ret)
      // 给参数传值
      this.previewImg = ret.data.url
      setTimeout(() => {
        this.dialogVisible = false
        this.loadImageInfo()
        this.previewImg = ''
      }, 1000)
    },
    // 点击删除 触发
    deleteImage (item) {
      this.$confirm('确认删除吗').then(async () => {
        await deleteImage(item.id)
        //   this.loadImageInfo()
        // 查看要删除的图片的数据的索引
        const index = this.list.findIndex(img => {
          return img === item
        })
        // 根据索引删除一个数据
        this.list.splice(index, 1)
      }).catch(e => {
        if (e === 'cancel') {
          console.log('取消删除')
        } else {
          this.$message.error('删除图片失败')
        }
      })
    },
    // 点击小星星触发方法
    // 此处的item里有当前图片的所有属性
    async toggleStatus (item) {
      //   console.log(item)
      try {
        // 发送收藏请求
        await toggleCollect({
          id: item.id,
          // 发送请求后 将collect的状态值改为true  默认是false 这只是将后端的状态改变了
          collect: !item.is_collected
        })
        // 页面进行改变颜色  当tem.is_collected发生改变  类名red如果为true就添加此类名 否则反之
        item.is_collected = !item.is_collected
      } catch (error) {
        this.$message.error('收藏失败')
      }
    },
    // 当状态发生变化时  触发该方法
    handleChange () {
      this.filterParams.page = 1
      this.loadImageInfo()
    },
    // 当页码发生变化时 触发
    changePager (newPage) {
      // 改变页码
      this.filterParams.page = newPage
      // 重新渲染页面
      this.loadImageInfo()
    },
    async loadImageInfo () {
      try {
        const ret = await loadImageInfo(this.filterParams)
        // 获取图片  存储在results中
        this.list = ret.data.results
        // 获取总页数
        this.total = ret.data.total_count
        // console.log(ret)
      } catch (error) {
        console.log(error)
        this.$message.error('获取素材列表失败')
      }
    }
  },
  created () {
    this.loadImageInfo()
  }
}
</script>
<style scoped lang='less'>
.img-list {
  padding-top: 30px;
  .img-item {
    width: 180px;
    height: 180px;
    border: 1px dashed #ddd;
    position: relative;
    display: inline-block;
    margin: 0 30px 20px;
    .el-image {
      width: 100%;
      height: 80%;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .option {
      height: 30px;
      width: 100%;
      background: rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 0;
      bottom: 0;
      text-align: center;
      line-height: 30px;
      span {
        color: #fff;
        margin: 0 20px;
      }
      .red {
        color: red;
      }
    }
  }
}
.upload-demo {
  font-size: 50px;
  text-align: center;
  img {
    width: 100%;
  }
}
</style>
